<template>
	<div class="event-set">
		<Notice></Notice>
		<u-navbar :is-back="true">
			<view class="navbar-slot flex">
				<u-tabs class="tab" :list="tabs" :current="current" @change="change"></u-tabs>
			</view>
		</u-navbar>
		<div class="container-1" v-show="current==0">
			<div class="input-box">
				<u-input v-model="params.title" type="text" :focus="true" placeholder="请输入事件名称" :clearable="false" />
			</div>
			<div class="input-box">
				<div class="title">时间段</div>
				<div class="date flex">
					<span class="start" @click="dateSelect(1)">{{ params.event_start ? params.event_start : "请选择开始时间" }}</span> ~ <span class="end" @click="dateSelect(2)">{{ params.event_end ? params.event_end : "请选择结束时间" }}</span>
				</div>
			</div>
			<div class="input-box">
				<div class="title flex">
					<span>关键词一</span>
					<u-icon name="plus" color="#1E62FC" size="36" @click="add"></u-icon>
				</div>
				<u-input v-show="words_1_isActive || !params.words.words_1.length" v-model="words_1" :focus="words_1_isActive" @blur="wordBlur(words_1)" @confirm="wordBlur(words_1)" type="text" placeholder="请输入关键词，最多5个词" :clearable="false" />
				<div class="word-show flex" v-show="!words_1_isActive && !!params.words.words_1.length" @click="wordActive">
					<u-tag class="tag" :text="word" v-for="(word, key) in params.words.words_1" :key="key" />
				</div>
			</div>
			<div v-if="words.length>0">
				<div class="input-box" v-for="(item,index) in words" :key="index">
					<div class="title flex">
						<span>关键词{{ cnWords[index] }}</span>
						<u-icon name="minus" color="#FC1E1E" size="36" @click="remove(index)"></u-icon>
					</div>
					<u-input v-model="item.value" type="text" placeholder="请输入关键词，最多5个词" v-show="item.isActive || !item.arr.length" :focus="item.isActive" @blur="inputBlur(item)" @confirm="inputBlur(item)" :clearable="false" />
					<div class="word-show" v-show="!item.isActive" @click="inputActive(item)">
						<u-tag class="tag" :text="word" v-for="(word, key) in item.arr" :key="key" />
					</div>
				</div>
			</div>
			<div class="input-box">
				<div class="title flex">
					<span>歧义词</span>
				</div>
				<u-input v-model="ab_words" ref="input_ab" v-show="ab_words_isActive || !params.ab_words.length" :focus="ab_words_isActive" @blur="abBlur(ab_words)" @confirm="abBlur(ab_words)" type="text" placeholder="请输入歧义词，最多5个词" :clearable="false" />
				<div class="word-show flex" v-show="!ab_words_isActive && !!params.ab_words.length" @click="abActive">
					<u-tag class="tag" :text="word" v-for="(word, key) in params.ab_words" :key="key" />
				</div>
			</div>
			<div class="input-box">
				<u-collapse>
					<u-collapse-item title="排除设置">
						<div class="title flex">
							<span>排除词</span>
						</div>
						<u-input v-model="exclude_words" v-show="exclude_words_isActive || !params.exclude_words.length" :focus="exclude_words_isActive" @blur="excludeBlur('words',exclude_words)" @confirm="excludeBlur('words',exclude_words)" type="text" placeholder="请输入" :clearable="false" />
						<div class="word-show flex" v-show="!exclude_words_isActive && !!params.exclude_words.length" @click="excludeActive('words')">
							<u-tag class="tag" :text="word" v-for="(word, key) in params.exclude_words" :key="key" />
						</div>
						<div class="title flex">
							<span>排除域名</span>
						</div>
						<u-input v-model="exclude_domain" v-show="exclude_domain_isActive || !params.exclude_domain.length" :focus="exclude_domain_isActive" @blur="excludeBlur('domain',exclude_domain)" @confirm="excludeBlur('domain',exclude_domain)" type="text" placeholder="请输入" :clearable="false" />
						<div class="word-show flex" v-show="!exclude_domain_isActive && !!params.exclude_domain.length" @click="excludeActive('domain')">
							<u-tag class="tag" :text="word" v-for="(word, key) in params.exclude_domain" :key="key" />
						</div>

						<div class="title flex">
							<span>排除频道</span>
						</div>
						<u-input v-model="exclude_channel" v-show="exclude_channel_isActive || !params.exclude_channel.length" :focus="exclude_channel_isActive" @blur="excludeBlur('channel',exclude_channel)" @confirm="excludeBlur('channel',exclude_channel)" type="text" placeholder="请输入" :clearable="false" />
						<div class="word-show flex" v-show="!exclude_channel_isActive && !!params.exclude_channel.length" @click="excludeActive('channel')">
							<u-tag class="tag" :text="word" v-for="(word, key) in params.exclude_channel" :key="key" />
						</div>

						<div class="title flex">
							<span>排除作者</span>
						</div>
						<u-input v-model="exclude_users" v-show="exclude_users_isActive || !params.exclude_users.length" :focus="exclude_users_isActive" @blur="excludeBlur('users',exclude_users)" @confirm="excludeBlur('users',exclude_users)" type="text" placeholder="请输入" :clearable="false" />
						<div class="word-show flex" v-show="!exclude_users_isActive && !!params.exclude_users.length" @click="excludeActive('users')">
							<u-tag class="tag" :text="word" v-for="(word, key) in params.exclude_users" :key="key" />
						</div>
					</u-collapse-item>
				</u-collapse>
			</div>
			<div class="input-box">
				<div class="title flex">
					<span>评论数据匹配</span>
				</div>
				<div class="radio-box flex">
					<span class="radio" :class="params.comment_match == item.value && 'on'" v-for="item in comments" :key="item.value" @click="params.comment_match=item.value">{{ item.label }}</span>
				</div>
			</div>


		</div>
		<div class="container-2" v-show="current==1">
			<div class="input-box">
				<div class="title flex">
					<span>事件动态推送</span>
					<u-switch size="32" v-model="params.event_push"></u-switch>
				</div>
				<div class="tip">通过微信接收事件最新动态，对事件走势及时研判!</div>
			</div>
			<div class="gray">接受设置</div>
			<div class="input-box">
				<div class="title">接受时间</div>
				<div class="date flex">
					<span class="start" @click="timeSelect(1)">{{ push.start ? push.start : "请选择开始时间" }}</span> ~ <span class="end" @click="timeSelect(2)">{{ push.end ? push.end : "请选择结束时间" }}</span>
				</div>
			</div>
			<div class="input-box">
				<div class="title">推送间隔</div>
				<u-radio-group size="32">
					<u-radio v-for="(item, index) in timeOptions" :key="index" :name="item">
						{{item}}
					</u-radio>
				</u-radio-group>
			</div>
			<div class="input-box">
				<div class="title">周末推送（单选）</div>
				<u-radio-group size="32">
					<u-radio v-for="(item, index) in wedOptions" :key="index" :name="item.value">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</div>
			<div class="input-box">
				<div class="title">接收模板设置（多选）</div>
				<u-checkbox-group size="32">
					<u-checkbox v-for="(item, index) in modelOptions" :key="index" :name="item.value">
						{{item.label}}
					</u-checkbox>
				</u-checkbox-group>
			</div>
			<div class="input-box">
				<div class="title">榜单变化（单选）</div>
				<u-radio-group size="32">
					<u-radio v-for="(item, index) in topChangeOptions" v-model="item.checked" :key="index" :name="item.value">
						{{item.label}}
					</u-radio>
				</u-radio-group>
			</div>
		</div>

		<div class="btns flex">
			<div class="l flex">
				<!-- <u-icon name="question-circle" size="32" color="#999"></u-icon>
				说明 -->
			</div>
			<div class="r flex">
				<u-button class="btn" type="primary" :loading="loading" @click="save">保存事件</u-button>
			</div>
		</div>


		<u-picker mode="time" :default-time="defaultDate" v-model="isDate" :params="dateconfig" @confirm="dateConfirm"></u-picker>
		<u-picker mode="time" :default-time="defaultTime" v-model="isTime" :params="timeconfig" @confirm="timeConfirm"></u-picker>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { eventAdd, eventEdit, eventDetail } from "@/api/event.js"

export default {
	data() {
		return {
			id: "",
			titleFocus: true,
			tabs: [
				{
					name: "新建事件"
				}, 
				{
					name: "事件动态推送"
				}
			],
			current: 0,

			cnWords: ["二","三","四","五","六","七","八","九","十"],
			words: [],
			params: {
				title: "",
				words: {
					words_1: [],
					words_2: [],
					words_3: [],
					words_4: [],
					words_5: [],
					words_6: [],
					words_7: [],
					words_8: [],
					words_9: [],
					words_10: [],
				},
				event_start: "",
				event_end: "",
				event_push: false,
				ab_words: [],
				exclude_words: [],
				exclude_users: [],
				exclude_domain: [],
				exclude_channel: [],
				comment_match: "1"
			},
			words_1: "",
			words_1_isActive: false,
			ab_words: "",
			ab_words_isActive: false,

			exclude_words: "",
			exclude_words_isActive: true,
			exclude_users: "",
			exclude_users_isActive: true,
			exclude_domain: "",
			exclude_domain_isActive: true,
			exclude_channel: "",
			exclude_channel_isActive: true,

			comments: [
				{label:"仅匹配关键词的评论", value: "1"},
				{label:"全部评论", value: "2"},
				{label:"不匹配评论", value: "3"}
			],


			isDate: false,
			dateType: 1,
			dateconfig: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true
			},
			defaultDate: "",
			isTime: false,
			dateType: 1,
			timeconfig: {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false
			},
			defaultTime: "",
			timeOptions: ["30分钟","1小时","2小时","5小时","6小时","8小时"],
			wedOptions: [
				{ label: "周末推送", value: 1 },
				{ label: "周末不推送", value: 2 },
			],
			modelOptions: [
				{ label: "媒体类型数据量统计", checked: false, value: 1 },
				{ label: "热搜榜", checked: false, value: 2 },
				{ label: "重点媒体发文统计", checked: false, value: 3 },
				{ label: "网民观点", checked: false, value: 4 },
			],
			topChangeOptions: [
				{ label: "推送", value: 1 },
				{ label: "不推送", value: 2 },
			],
			push: {
				start: "",
				end: "",
			},

			loading: false,
		}
	},
	onLoad: function (option) {
		this.defaultDate = this.$u.timeFormat(new Date().getTime(), "yyyy-mm-dd")+" 00:00:00";
		this.defaultTime = this.$u.timeFormat(new Date().getTime(), "hh")+":00";
		if(!!option.id){
			this.tabs[0].name = "编辑事件";
			this.id = option.id;
			this.getDetail();
		}
	},
	methods: {
		getDetail() {
			uni.showLoading({title: "加载中"})
			eventDetail({id: this.id}).then(({data})=>{
				uni.hideLoading();
				let tmp = {...data};
				tmp.event_push = tmp.event_push=="t" ? true : false;
				tmp.event_start = this.$u.timeFormat(tmp.event_start*1000, "yyyy-mm-dd hh:MM:ss");
				tmp.event_end = this.$u.timeFormat(tmp.event_end*1000, "yyyy-mm-dd hh:MM:ss");
				this.words_1 = tmp.words.words_1.join(" ");
				this.words_1_isActive = false;
				for(let i=2; i<=10; i++){
					if(!!tmp.words['words_'+i].length){
						this.words.push({
							value: tmp.words['words_'+i].join(" "),
							arr: tmp.words['words_'+i],
							isActive: false
						});
					}
				}
				if(!!tmp.ab_words.length){
					this.ab_words = tmp.ab_words.join(" ");
					this.ab_words_isActive = false;
				}
				if(!!tmp.exclude_words.length){
					this.exclude_words = tmp.exclude_words.join(" ");
					this.exclude_words_isActive = false;
				}
				if(!!tmp.exclude_users.length){
					this.exclude_users = tmp.exclude_users.join(" ");
					this.exclude_users_isActive = false;
				}
				if(!!tmp.exclude_domain.length){
					this.exclude_domain = tmp.exclude_domain.join(" ");
					this.exclude_domain_isActive = false;
				}
				if(!!tmp.exclude_channel.length){
					this.exclude_channel = tmp.exclude_channel.join(" ");
					this.exclude_channel_isActive = false;
				}

				this.params = tmp;
			});
		},
		change(val) {
			this.current = val;
		},
		dateSelect(type) {
			this.dateType = type;
			this.isDate = true;
		},
		dateConfirm(date) {
			if(this.dateType == 1){
				this.params.event_start = date.year+"-"+date.month+"-"+date.day+" "+date.hour+":"+date.minute+":"+date.second;
			}else if(this.dateType == 2){
				this.params.event_end = date.year+"-"+date.month+"-"+date.day+" "+date.hour+":"+date.minute+":"+date.second;
			}
		},
		add() {
			if(this.words.length == 9){
				this.$refs.uToast.show({
					title: "最多设置十组关键词",
					type: "error",
				});
			}else{
				this.words.push({
					value: "",
					arr: [],
					isActive: true
				});
			}
		},
		remove(index) {
			if(this.words.length > 0){
				this.words.splice(index, 1);
			}
		},
		save() {
			if(!!this.words_1.length) this.params.words.words_1 = this.words_1.split(" ");
			if(!!this.words.length){
				this.words.map((item,index)=>{
					if(!!item.value.length) this.params.words["words_"+(index+2)] = item.value.split(" ");
				});
			}
			
			if(!this.params.title.length){
				this.$refs.uToast.show({
					title: "请输入事件名称",
					type: "error",
				});
			}else if(!this.params.event_start.length || !this.params.event_end.length){
				this.$refs.uToast.show({
					title: "请选择时间段",
					type: "error",
				});
			}else if(!this.params.words.words_1.length){
				this.$refs.uToast.show({
					title: "请输入关键词",
					type: "error",
				});
			}else{
				let data = {...this.params};
				if(!!this.words.length){
					this.words.map((item,index)=>{
						data.words['words_'+(index+2)] = item.value.split(" ");
					});
				}
				data.event_push = data.event_push ? "t" : "f";
				this.loading = true;
				if(!this.id){
					eventAdd(data).then(({code})=>{
						this.loading = false;
						if(code == 200){
							this.$refs.uToast.show({
								title: "保存成功",
								type: "success",
								callback: ()=>{
									uni.switchTab({
										url: "/pages/eventList/eventList",
										success: function(e){
											let page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.refresh();
										}
									});
								}
							});
						}
					});
				}else{
					eventEdit(data).then(({code})=>{
						this.loading = false;
						if(code == 200){
							this.$refs.uToast.show({
								title: "保存成功",
								type: "success",
								callback: ()=>{
									uni.switchTab({
										url: "/pages/eventList/eventList",
										success: function(e){
											let page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.refresh();
										}
									});
								}
							});
						}
					});
				}
			}
		},
		inputBlur(word) {
			word.isActive = false;
			if(!!word.value.length){
				word.arr = word.value.split(" ");
			}else{
				word.arr = [];
			}
		},
		inputActive(word) {
			word.isActive = true;
		},
		wordBlur(word) {
			this.words_1_isActive = false;
			if(!!word.length){
				this.params.words.words_1 = word.split(" ")
			}else{
				this.params.words.words_1 = [];
			}
		},
		wordActive() {
			this.words_1_isActive = true;
		},
		abBlur(word) {
			this.ab_words_isActive = false;
			if(!!word.length){
				this.params.ab_words = word.split(" ")
			}else{
				this.params.ab_words = []
			}
		},
		abActive() {
			this.ab_words_isActive = true;
		},
		timeSelect(type) {
			this.timeType = type;
			this.isTime = true;
		},
		timeConfirm(date) {
			if(this.timeType == 1){
				this.push.start = date.hour+":"+date.minute;
			}else if(this.timeType == 2){
				this.push.end = date.hour+":"+date.minute;
			}
		},
		excludeBlur(key, word) {
			if(key == "words"){
				this.exclude_words_isActive = false;
				if(!!word.length){
					this.params.exclude_words = word.split(" ");
				}else{
					this.params.exclude_words = [];
				}
			}else if(key == "domain"){
				this.exclude_domain_isActive = false;
				if(!!word.length){
					this.params.exclude_domain = word.split(" ");
				}else{
					this.params.exclude_domain = [];
				}
			}else if(key == "channel"){
				this.exclude_channel_isActive = false;
				if(!!word.length){
					this.params.exclude_channel = word.split(" ");
				}else{
					this.params.exclude_channel = [];
				}
			}else if(key == "users"){
				this.exclude_users_isActive = false;
				if(!!word.length){
					this.params.exclude_users = word.split(" ");
				}else{
					this.params.exclude_users = [];
				}
			}
		},
		excludeActive(key) {
			if(key == "words"){
				this.exclude_words_isActive = true;
			}else if(key == "domain"){
				this.exclude_domain_isActive = true;
			}else if(key == "channel"){
				this.exclude_channel_isActive = true;
			}else if(key == "users"){
				this.exclude_users_isActive = true;
			}
		},
		word1_change() {
			console.log(111,this.words_1)
		}
	}
}
</script>

<style lang="scss" scoped>
.event-set{
	padding-bottom: 120rpx;
}
.navbar-slot{
	justify-content: center;
	width: 100%;
	margin-right: 80rpx;
}
.container{
	padding-top: 20rpx;
}
.input-box{
	padding: 0 20rpx;
	border-bottom: 1rpx solid #F0F0F0;
}
.title{
	font-size: 30rpx;
	color: #666;
	padding: 20rpx 0;
	justify-content: space-between;
}
.date{
	padding-bottom: 15rpx;
	.start,.end{
		font-size: 28rpx;
		color: #666;
		width: 45%;
		text-align: center;
	}
}
.word-show{
	margin-bottom: 20rpx;
	flex-wrap: wrap;
	.tag{
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
}
.btns{
	padding: 20rpx;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	box-shadow: 0rpx -6rpx 30rpx 0rpx rgba(192, 192, 192, 0.3);
	background-color: #fff;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	.l{
		align-items: center;
		font-size: 28rpx;
	}
	.btn{
		margin: 0;
		margin-left: 20rpx;
	}
}
.radio{
	cursor: pointer;
	padding: 10rpx;
	margin-right: 20rpx;
	border: 1rpx solid #F0F0F0;
	border-radius: 8rpx;
	font-size: 24rpx;
	margin-bottom: 20rpx;
}
.on{
	color: #fff;
	background-color: #1E62FC;
	border: 1rpx solid #1E62FC;
}
.tip{
	font-size: 24rpx;
	color: #999;
	margin-bottom: 20rpx;
}
.container-2{
	.title{
		color: #333;
		padding-bottom: 10rpx;
	}
	.gray{
		background-color: #F2F3F7;
		height: 80rpx;
		color: #333;
		font-size: 28rpx;
		line-height: 80rpx;
		padding-left: 20rpx;
	}
}
</style>
